// import * as echarts from 'echarts';
import { useState, useEffect } from 'react';
import './common.css'
import { bus } from './store';
import { Table } from 'antd';

export default function LeftBottom() {
 const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
 const [area, setArea] = useState('')
 const [dataSource, setDataSource] = useState<{ "航空公司": string, "飞机编号": string, "起飞时间": string, "起飞机场": string, "到达时间": string, "到达机场": string, "准点概率": string }[]>([])
 let key = 0
 const lineSet: { "航空公司": string, "飞机编号": string, "起飞时间": string, "起飞机场": string, "到达时间": string, "到达机场": string, "准点概率": string }[] = []
 const columns = [
  {
   title: '航班号',
   dataIndex: '飞机编号',
   width: '4vw',
   fixed: true,
   className: 'transparent',
  },
  {
   title: '航空公司',
   dataIndex: '航空公司',
   width: '4vw',
   fixed: false,
   className: 'transparent'
  },
  {
   title: '出发机场',
   dataIndex: '起飞机场',
   width: '4vw',
   fixed: false,
   className: 'transparent'
  },
  {
   title: '出发时间',
   dataIndex: '起飞时间',
   width: '4vw',
   fixed: false,
   className: 'transparent',
   sortDirection: ['ascend', 'descend'],
   sorter: (a: string, b: string) => {
    return parseInt(a['起飞时间'][0] + a['起飞时间'][1]) - parseInt(b['起飞时间'][0] + b['起飞时间'][1]) || parseInt(a['起飞时间'][3] + a['起飞时间'][4]) - parseInt(b['起飞时间'][3] + b['起飞时间'][4])
   }
  },
  {
   title: '到达机场',
   dataIndex: '到达机场',
   width: '4vw',
   fixed: false,
   className: 'transparent'
  },
  {
   title: '到达时间',
   dataIndex: '到达时间',
   width: '4vw',
   fixed: false,
   className: 'transparent'
  },
  {
   title: '准点率',
   dataIndex: '准点概率',
   width: '4vw',
   fixed: false,
   className: 'transparent'
  },
 ]
 useEffect(() => {
  bus.on('area', (msg) => {
   setArea(msg)
  })
  bus.on('refresh', () => {
   lineSet.splice(0, lineSet.length)
   key = 0
  })
  bus.on('addLine', (lines: { name: string, lines: { "航空公司": string, "飞机编号": string, "起飞时间": string, "起飞机场": string, "到达时间": string, "到达机场": string, "准点概率": string }[] }[]) => {
   lines.forEach(v => {
    const lines = v.lines.map(line => {
     key += 1
     return { ...line, key }
    })
    lineSet.push(...lines)
    setDataSource([...lineSet])
   })
  })
 })
 return (
  <div style={{ left: 0, bottom: 0, color: '#ffffff', fontSize: '20px' }} className='table'>
   <h4 style={{ height: '5vh', textAlign: 'center', lineHeight: '5vh' }}>{area}航班信息</h4>
   <Table dataSource={dataSource} columns={columns as unknown as { key: number, "航空公司": string, "飞机编号": string, "起飞时间": string, "起飞机场": string, "到达时间": string, "到达机场": string, "准点概率": string }[]} rowSelection={{ type: 'checkbox', selectedRowKeys, onChange: (newSelectedRowKeys) => { setSelectedRowKeys(newSelectedRowKeys) } }} scroll={{ y: '42vh' }} pagination={{ style: { height: '3vh', marginTop: '2vh' }, hideOnSinglePage: true }} />
  </div>
 )
}
